<template>
  <div>
    <el-row>
      <el-col :span="24" class="flex-end">
        <el-button
          class="m-r-10"
          size="small"
          type="primary"
          plain
          @click="settingShortcredit"
          >设置临时额度</el-button
        >
      </el-col>
    </el-row>
    <el-table
      class="my-table m-t-10"
      :data="data"
      v-loading="loading"
      style="width: 100%"
      border
      :header-cell-style="{ background: '#eee', color: '#000' }"
    >
      <el-table-column type="index" align="center" label="序号" width="60" />
      <el-table-column label="临时额度（元）" min-width="150">
        <template v-slot="scope">
          {{ scope.row.creditMoney | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column label="设置时间" min-width="100">
        <template v-slot="scope">
          {{ scope.row.createTime | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column label="生效月份" min-width="100">
        <template v-slot="scope">
          {{ scope.row.validDate | defaultValue }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="130">
        <template v-slot="scope">
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              操作列表
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="{
                  c: 'edit',
                  v: scope.row,
                }"
              >
                编辑
              </el-dropdown-item>

              <el-dropdown-item
                :command="{
                  c: 'delete',
                  v: scope.row,
                }"
              >
                删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination
      ref="paginationRef"
      :total="total"
      :page-size="page.size"
      class="m-t-20"
      @change="pageChange"
    />
    <el-dialog
      title="设置临时额度"
      append-to-body
      :visible.sync="settingDialog"
      width="400px"
    >
      <el-form
        class="pa-12"
        :model="settingForm"
        ref="settingFormRef"
        label-width="130px"
      >
        <el-form-item label="额度(元)" prop="cardNo">
          <el-input v-model="settingForm.creditMoney"></el-input>
        </el-form-item>
      </el-form>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button
          type="primary"
          plain
          size="small"
          @click="settingDialog = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="small"
          @click="confirmSettingcreditMoney"
          :loading="settingLoading"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppPagination from "@/components/business/app-pagination";
import {
  getPage,
  monthlyLimitSetting,
  remove,
} from "@/api/business/filling-team-credit";
import { confirmWarning, msgSuccess, strEquals } from "@/util/common-util";

export default {
  name: "contract-customer-credit-tab",
  computed: {
    ...mapGetters(["permission"]),
  },
  components: {
    AppPagination,
  },
  props: ["id"],
  data() {
    return {
      loading: false,
      data: [],
      search: {
        teamId: "",
        keyWord: "",
      },
      page: {
        size: 20,
        current: 1,
      },
      total: 0,
      settingDialog: false,
      settingLoading: false,
      settingForm: {
        creditMoney: "",
      },
    };
  },
  created() {
    this.search.teamId = this.id;
    this.query();
  },
  methods: {
    handleCommand(_command) {
      const row = _command.v;
      if (strEquals(_command.c, "edit")) {
        this.settingForm = row;
        this.settingDialog = true;
      }
      if (strEquals(_command.c, "delete")) {
        confirmWarning("删除操作", `确定删除此数据？`, () => {
          remove(row.id)
            .then((res) => {
              this.query();
              msgSuccess();
            })
            .catch(() => {});
        });
      }
    },
    pageChange(_page) {
      this.page = _page;
      this.query();
    },
    query() {
      this.loading = true;
      getPage(this.page, this.search)
        .then((res) => {
          this.data = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        })
        .then(() => {
          this.loading = false;
        });
    },
    settingShortcredit() {
      this.settingForm = {
        creditMoney: "",
      };
      this.settingDialog = true;
    },
    confirmSettingcreditMoney() {
      this.settingForm.teamId = this.id;
      let params = {
        teamId: this.id,
        creditMoney: this.settingForm.creditMoney,
      };
      this.$refs.settingFormRef.validate((valid, errObj) => {
        if (valid) {
          this.settingLoading = true;
          monthlyLimitSetting(params)
            .then((res) => {
              msgSuccess();
              this.query();
              this.settingDialog = false;
              this.settingLoading = false;
            })
            .catch(() => {
              this.settingLoading = false;
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
